<template>
  <div id="app">
    <v-header v-show="$route.path.indexOf('service')==-1"></v-header>
    <div class="giftPack" v-show="$route.path.indexOf('manage')==-1&&$route.path.indexOf('service')==-1">
       <router-link to="/">
          <img src="./assets/rebate.png" alt="">
       </router-link>
    </div>
     <transition :name="`slide-${direction === 'forward' ? 'in' : 'out'}`">
          <keep-alive>
              <router-view></router-view>
          </keep-alive>
      </transition>
    <div class="tab">
        <div class="tab-item">
           <router-link to="/game">游戏</router-link>
        </div>
        <div class="tab-item">
           <router-link to="/gift">礼包</router-link>
        </div>
        <div class="tab-item">
           <router-link to="/activity">活动</router-link>
        </div>
        <div class="tab-item">
           <router-link to="/manage">管理</router-link>
        </div>
    </div>
  </div>
</template>

<script>
import {mapGetters,mapMutations} from 'vuex'
import header from 'components/header';
// import MTransition from 'components/m-transition';
export default {
  name: 'App',
  data(){
    return{

    }
  },
  computed: {
      ...mapGetters(['direction'])
  },
  methods:{
    
  },
  mounted(){
    var obj=document.getElementsByClassName('giftPack')[0];
    obj.addEventListener('touchmove',function(event){
        event.preventDefault();
        if(event.targetTouches.length == 1){
            var touch = event.targetTouches[0];
            console.log(touch)
            obj.style.top=touch.pageY-60+"px";
            obj.style.left=touch.pageX-60+"px";
            
        }
    },false);
  },
  components:{
    'v-header':header,
    // MTransition
  }
}
</script>

<style lang="scss" scoped>
  .tab{
    display:flex;
    position:fixed;
    height:40px;
    line-height:40px;
    bottom:0;
    width:100%;
    background:#fff;
    .tab-item{
      flex:1;
      text-align:center;
      a.router-link-active{
        color:red;
      }
    }
  }
.giftPack{
  position:fixed;
  top: 297px;
  right: 72px;
  z-index: 99999999;
  width: 120px;
  img{
    width:100%;
  }
}
.slide-out-enter-active,
.slide-out-leave-active,
.slide-in-enter-active,
.slide-in-leave-active {
    will-change: transform;
    transition: all 0.3s;
    backface-visibility: hidden;
    perspective: 1000;
}

.slide-in-enter,
.slide-out-leave-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}
.slide-out-enter,
.slide-in-leave-active {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}
</style>
